<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>游戏内页</title>
		<link rel="stylesheet" type="text/css" href="font/iconfont.css"/>
		<link rel="stylesheet" type="text/css" href="css/gamePage.css"/>
	    <script>
	    	
	    	function game(){
				location.href="gameList.html";
			}
	    	function home(){
				location.href="index.html";
			}
	    	
	    	window.onload = function () {
	    		
	    		/***1.获取事件源及相关元素.***/
	    		var iphone = document.getElementById("iphone");
	    		var iphone_d = iphone.firstElementChild || iphone.firstChild;
                var imgWidth = iphone_d.offsetWidth;
                var ul = iphone_d.firstElementChild || iphone_d.firstChild;
                var ol = iphone_d.children[1];
                var div = iphone_d.lastElementChild || iphone_d.lastChild;
                
//              console.log(div);
                /***2.复制第一张图片所在的li，添加到ul的最后面***/
                var ulNewLi = ul.children[0].cloneNode(true);
                ul.appendChild(ulNewLi);
                
          		/***3.给ol中添加li，ul中的个数-1个，并点亮第一个按钮。***/
          		for(var i=0; i<ul.children.length-1;i++){
          			var olNewLi = document.createElement("li");
//        			olNewLi.innerHTML = i+1;
                    ol.appendChild(olNewLi);
          		}
          		var olLiArr = ol.children ;
          		
          		/***4.鼠标放到ol的li上切换图片****/
          		
          		/***5.添加定时器***/
          		var timer = setInterval(autoPlay,2200);
          		
          		//固定向右切换图片
          		var key = 0;
          		var square = 0;
          		function autoPlay(){
          			key++;
          			if(key>olLiArr.length){
          				ul.style.left = 0;
          				key = 1;
          			}
//        			console.log(key)
          			animate(ul,-key*imgWidth);
          		}
          		
          		function animate(ele,target){
          			clearInterval(ele.timer);
          			console.log(ele.offsetLeft);
          			var speed = target>ele.offsetLeft?22:-22;
          			ele.timer = setInterval( function () {
          				var val = target - ele.offsetLeft;
//        				console.log(val);
//        				console.log(ele.offsetLeft);
                        ele.style.left = ele.offsetLeft + speed + "px";
          				if(Math.abs(val)<Math.abs(speed)){
          					ele.style.left = target + "px";
          					clearInterval(ele.timer);
          				}
          			},100);
          		}
	    	}
	    </script>
	</head>
	<body>
		<div class="wrap">
			<!--头部导航栏-->
			<header>
				<div class="h_logo">
					<img class="img" src="img/logo.png"/>
				</div>
				<div class="h_bottom">
					<i class="iconfont icon-weibo"></i>
				</div>
				<!--导航栏-->
				<div class="h_bar clearfix">
					<div onclick="home()">
						<span>首页</span>
						<span>home</span>
					</div>
					<div onclick="game()">
						<span>游戏</span>
						<span>game</span>
					</div>
					<div>
						<span>案例</span>
						<span>Case</span>
					</div>
					<div>
						<span>关于我们</span>
						<span>About us</span>
					</div>
				</div>
			</header>
			<!--中间主要内容部分-->
			<section>
				<!--宝石迷阵介绍-->
				<div class="s_t">
					<div class="s_introduce">
						<div></div>
						<p>宝石迷阵</p>
						<p> 《宝石迷阵》与暴司时候发行的游的的戏《星际争霸》一样，是一款成功的即时战略游戏。游戏时战略游戏所要素:建设基地和指挥指挥战斗。游戏的操作方式也，秉承了星霸优点，并对星际争霸中一些繁琐的操作进行了简化。</p>
					</div>
					<div class="s_btn">
						<div>收藏</div>
						<div>制作游戏</div>
						<div>购买</div>
					</div>
				</div>
				<!--价格、时间等信息-->
				<div class="s_infor">
					<div class="iphone" id="iphone">
						<div class="iphone_d">
							<!--轮播图片-->
							<ul class="clearfix">
								<li>
									<div class="wrap_img">
										<img  src="img/ul1.jpg"/>
									</div>
								</li>
								<li>
									<div class="wrap_img">
										<img  src="img/game01.jpg"/>
									</div>
								</li>
								<li>
									<div class="wrap_img">
										<img  src="img/game02.jpg"/>
									</div>
								</li>
								<li>
									<div class="wrap_img">
										<img  src="img/game03.jpg"/>
									</div>
								</li>
								<li>
									<div class="wrap_img">
										<img  src="img/game05.jpg"/>
									</div>
								</li>
							</ul>
							<!--小圆点-->
							 <ol></ol>
						</div>
					</div>
					<div class="s_infor_m">
						<div><i class="iconfont icon-wenjian"></i></div>
						<span>大小</span>
						<span>1034KB</span>
					</div>
					<div class="s_infor_m">
						<div><i class="iconfont icon-iconshoucang"></i></div>
						<span>使用次数</span>
						<span>20</span>
					</div>
					<div class="s_infor_m">
						<div><i class="iconfont icon-anonymous-iconfont"></i></div>
						<span>价格</span>
						<span>2333</span>
					</div>
					<div class="s_infor_m">
						<div><i class="iconfont icon-time"></i></div>
						<span>时间</span>
						<span>2014-07-09</span>
					</div>
				</div>
				<!--使用方法标题-->
				<div class="s_title">
					<div></div>
					<span>使用方法</span>
					<span>USE METHODS</span>
				</div>
				<!--游戏步骤-->
				<div class="s_step clearfix">
					<div class="step">
						<div>
							<img class="img" src="img/step01.png"/>
						</div>
						<span>STEP ONE</span>
						<span>选择一个游戏，换图</span>
					</div>
					<div class="font"><i class="iconfont icon-doubleright"></i></div>
					<div class="step">
						<div>
							<img class="img" src="img/step02.png"/>
						</div>
						<span>THE SECOND STEP</span>
						<span>选择一个游戏，换图</span>
					</div>
					<div class="font"><i class="iconfont icon-doubleright"></i></div>
					<div class="step">
						<div class="thire">
							<img class="img" src="img/step03.png"/>
						</div>
						<span>THE THIRD STEP</span>
						<span>选择一个游戏，换图</span>
					</div>
				</div>
			</section>			
			<!--页尾公共部分-->
			<footer>
				<div class="f_left clear"><img src="img/footer01.png"/></div>
				<div class="f_right"><img src="img/footer02.png"/></div>
				<span>Copyright © 2014 Pangtang. All Rights Reserved. 版权所有</span>
			</footer>
		</div>
	</body>
</html>
